<template>
  <view class="detail-container planet-bg">
    <!-- 星空背景 -->
    <view class="stars">
      <view v-for="star in stars" :key="star.id" class="star" :style="star.style"></view>
    </view>
    
    <!-- 顶部导航栏 -->
    <view class="nav-bar">
      <view class="nav-left" @tap="goBack">
        <text class="back-icon">←</text>
      </view>
      <text class="nav-title">漂流瓶详情</text>
      <view class="nav-right"></view>
    </view>
    
    <!-- 漂流瓶内容 -->
    <view class="bottle-detail">
      <view v-if="bottle" class="bottle-content">
        <view class="bottle-header">
          <view class="bottle-from">
            <text class="from-icon">📍</text>
            <text class="from-text">来自 {{ bottle.from || '未知星球' }}</text>
          </view>
          <text class="bottle-time">{{ formatTime(bottle.time) }}</text>
        </view>
        
        <view class="bottle-message">
          {{ bottle.content }}
        </view>
        
        <view class="bottle-actions">
          <view class="action-item" @tap="likeBottle">
            <text class="action-icon">{{ isLiked ? '❤️' : '🤍' }}</text>
            <text class="action-text">{{ isLiked ? '已喜欢' : '喜欢' }}</text>
          </view>
          <view class="action-item" @tap="shareBottle">
            <text class="action-icon">🔄</text>
            <text class="action-text">分享</text>
          </view>
          <view class="action-item" @tap="replyBottle">
            <text class="action-icon">💬</text>
            <text class="action-text">回复</text>
          </view>
        </view>
      </view>
      
      <view v-else class="loading">
        <text>加载中...</text>
      </view>
    </view>
  </view>
</template>

<script>
  import { formatTime, showToast } from '../../src/common/tools';
  import bottleApi from '../../src/api/bottle/bottleApi';
  
  export default {
    data() {
      return {
        bottleId: '',
        bottle: null,
        isLiked: false,
        stars: [] // 存储星星数据
      };
    },
    onLoad(options) {
      // 初始化星空背景
      this.initStars();
      
      // 获取漂流瓶ID
      if (options && options.id) {
        this.bottleId = options.id;
        this.loadBottleDetail();
      } else {
        showToast('漂流瓶ID不存在');
        this.goBack();
      }
    },
    methods: {
      // 时间格式化方法
      formatTime,
      
      // 初始化星空背景
      initStars() {
        const starCount = 150;
        const tempStars = [];
        
        for (let i = 0; i < starCount; i++) {
          // 随机位置
          const x = Math.random() * 100;
          const y = Math.random() * 100;
          
          // 随机动画时长
          const duration = 2 + Math.random() * 3;
          
          // 随机大小
          const size = 1 + Math.random() * 3;
          
          // 随机透明度
          const opacity = 0.3 + Math.random() * 0.7;
          
          tempStars.push({
            id: `star-${i}`,
            style: {
              left: `${x}%`,
              top: `${y}%`,
              width: `${size}rpx`,
              height: `${size}rpx`,
              opacity: opacity,
              '--duration': `${duration}s`
            }
          });
        }
        
        this.stars = tempStars;
      },
      
      // 加载漂流瓶详情
      async loadBottleDetail() {
        try {
          // 使用模拟数据
          const mockBottles = [
            {
              id: 'bottle-1',
              content: '来自地球的问候，愿宇宙和平！希望所有生命都能和谐共存，探索宇宙的奥秘。',
              from: '地球',
              time: new Date().toISOString()
            },
            {
              id: 'bottle-2',
              content: '在火星上看地球，它是那么渺小却又那么重要。这颗蓝色星球承载了无数生命和文明的故事。',
              from: '火星',
              time: new Date(Date.now() - 3600000).toISOString()
            },
            {
              id: 'bottle-3',
              content: '希望有一天能在土星的光环下漫步，感受宇宙的壮丽与神秘。每一颗星辰都有属于自己的故事。',
              from: '土星',
              time: new Date(Date.now() - 7200000).toISOString()
            },
            {
              id: 'bottle-4',
              content: '宇宙如此浩瀚，人类如此渺小，但我们的探索精神将永远闪耀，如同夜空中最亮的星。',
              from: '木星',
              time: new Date(Date.now() - 10800000).toISOString()
            }
          ];
          
          // 查找对应的漂流瓶
          this.bottle = mockBottles.find(b => b.id === this.bottleId);
          
          if (!this.bottle) {
            showToast('漂流瓶不存在');
            this.goBack();
          }
        } catch (error) {
          console.error('加载漂流瓶详情失败', error);
          showToast('加载漂流瓶详情失败');
          this.goBack();
        }
      },
      
      // 返回上一页
      goBack() {
        uni.navigateBack();
      },
      
      // 喜欢漂流瓶
      likeBottle() {
        this.isLiked = !this.isLiked;
        showToast(this.isLiked ? '已添加到喜欢' : '已取消喜欢');
      },
      
      // 分享漂流瓶
      shareBottle() {
        showToast('分享功能暂未开放');
      },
      
      // 回复漂流瓶
      replyBottle() {
        showToast('回复功能暂未开放');
      }
    }
  };
</script>

<style scoped>
  @import '../../src/style/global.scss';
  
  .detail-container {
    width: 100%;
    min-height: 100vh;
    color: var(--white);
    position: relative;
  }
  
  /* 导航栏样式 */
  .nav-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30rpx 30rpx;
    background-color: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10rpx);
    position: sticky;
    top: 0;
    z-index: 100;
  }
  
  .nav-left,
  .nav-right {
    width: 60rpx;
    height: 60rpx;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .back-icon {
    font-size: 36rpx;
  }
  
  .nav-title {
    font-size: 32rpx;
    font-weight: 500;
  }
  
  /* 漂流瓶详情样式 */
  .bottle-detail {
    padding: 40rpx 30rpx;
  }
  
  .bottle-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.05));
    border-radius: 20rpx;
    padding: 40rpx;
    border: 1rpx solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
  }
  
  .bottle-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30rpx;
  }
  
  .bottle-from {
    display: flex;
    align-items: center;
  }
  
  .from-icon {
    font-size: 28rpx;
    margin-right: 10rpx;
  }
  
  .from-text {
    font-size: 28rpx;
    opacity: 0.9;
  }
  
  .bottle-time {
    font-size: 24rpx;
    opacity: 0.7;
  }
  
  .bottle-message {
    font-size: 32rpx;
    line-height: 1.8;
    margin-bottom: 40rpx;
    white-space: pre-wrap;
  }
  
  .bottle-actions {
    display: flex;
    justify-content: space-around;
    padding-top: 30rpx;
    border-top: 1rpx solid rgba(255, 255, 255, 0.1);
  }
  
  .action-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20rpx 30rpx;
    transition: all 0.3s ease;
  }
  
  .action-item:active {
    transform: scale(0.95);
  }
  
  .action-icon {
    font-size: 48rpx;
    margin-bottom: 10rpx;
  }
  
  .action-text {
    font-size: 26rpx;
    opacity: 0.8;
  }
  
  .loading {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 400rpx;
    font-size: 32rpx;
    opacity: 0.7;
  }
</style>